<template>
  <div>

    <div id="login"  >

		<div id="bgd">
		  <canvas
		    id='myCanvas'
		    :width='width'
		    :height='height'
		  >
		  </canvas>
		</div>
  <div id="loginBox">
        <el-form :model="loginForm" ref="loginForm" :rules="loginRules">
            <h2>helloVue2</h2>
			<h4>你好Vue2</h4>
            <el-form-item>
				<el-input v-model="loginForm.username" name="username" placeholder="请输入用户名" auto-complete="on"></el-input>
            </el-form-item>

            <el-form-item>
              <el-input type="password" v-model="loginForm.password" name="password" placeholder="请输入密码" auto-complete="on"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary"  v-on:click="onSubmit()">登录</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="success"  v-on:click="myRegister()">注册</el-button>
            </el-form-item>
        </el-form>
        <el-link href="https://beian.miit.gov.cn/" target="_blank">
          xICP备x号
          </el-link>
 </div>



    </div>


    <div>

      <el-dialog :title="registerTitle" :visible.sync="registerVisible" :v-if="registerVisible" width="900px" height="600px"
        :before-close="handleClose">
        <el-row :gutter="0">
          <el-form label-width="150px" ref="elForm">
            <el-col :span="19">
              <el-form-item label="用户名">
                <el-input v-model="name" placeholder="用户名" :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="19">
              <el-form-item label="账号">
                <el-input v-model="username" placeholder="账号" :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="19">
              <el-form-item label="密码">
                <el-input v-model="password"  type="password" placeholder="密码" :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="19">
              <el-form-item label="邀请码">
                <el-input v-model="inviteCode" placeholder="邀请码" :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="19">
              <el-form-item size="large">
                <el-button type="primary" @click="submitConfigForm">提交</el-button>

              </el-form-item>
            </el-col>

          </el-form>
        </el-row>
      </el-dialog>

    </div>
    </div>
</template>


<script>
export default {
  name: "login",
  data() {



    return {
    registerTitle:"注册新用户",
    registerVisible:false,
    name:"",
    username:"",
    password:"",
    inviteCode:"",
		loginForm: {
		      username: '',
		      password: ''
		 },

	canvas: null,
	context: null,
	stars: [], //星星数组
	shadowColorList: [
	  "#39f",
	  "#ec5707",
	  "#b031d4",
	  "#22e6c7",
	  "#92d819",
	  "#14d7f1",
	  "#e23c66"
	], //阴影颜色列表
	directionList: ["leftTop", "leftBottom", "rightTop", "rightBottom"], //星星运行方向
	speed: 50, //星星运行速度
	last_star_created_time: new Date(), //上次重绘星星时间
	Ball: class Ball {
	  constructor(radius) {
	    this.x = 0;
	    this.y = 0;
	    this.radius = radius;
	    this.color = "";
	    this.shadowColor = "";
	    this.direction = "";
	  }

	  draw(context) {
	    context.save();
	    context.translate(this.x, this.y);
	    context.lineWidth = this.lineWidth;
	    var my_gradient = context.createLinearGradient(0, 0, 0, 8);
	    my_gradient.addColorStop(0, this.color);
	    my_gradient.addColorStop(1, this.shadowColor);
	    context.fillStyle = my_gradient;
	    context.beginPath();
	    context.arc(0, 0, this.radius, 0, Math.PI * 2, true);
	    context.closePath();

	    context.shadowColor = this.shadowColor;
	    context.shadowOffsetX = 0;
	    context.shadowOffsetY = 0;
	    context.shadowBlur = 10;

	    context.fill();
	    context.restore();
	  }
	}, //工厂模式定义Ball类
	width: window.innerWidth,
	height: window.innerHeight,


    }
  },
  methods: {
    myRegister(){
      this.registerVisible = true;
    },
	  onSubmit () {

		  var that = this
	    var data = this.loginForm;
      
      that.$router.push('/home');//demo直接跳转登录
      that.$message.success("登录成功");
      
      
	  	 this.$axios.post('/agent/login', {
	  	 	username: data.username,
	  		password:data.password
	  	 }).then(function(res) {
	  	 	if(res.data.code == '0000') {
				localStorage.setItem('username', data.username);
				localStorage.setItem('token', res.data.data.Authorization);
        localStorage.setItem('chineseName', res.data.data.chineseName);

				that.$message.success("登录成功");
			//	that.$router.push('/home');
	  	 	} else {
				that.$message.error(res.data.data);

	  	 	}
	  	 })
	  },

    submitConfigForm(){
      var that = this
       this.$axios.post('/agent/newuser', {
       name:that.name,
       username:that.username,
       password:that.password,
       inviteCode:that.inviteCode,
       }).then(function(res) {
       	if(res.data.code == '0000') {
      	that.$message.success(res.data.data);
        that.registerVisible =false;
       	} else {
      	that.$message.error(res.data.data);
       	}
       })


    },
	//重复动画
	drawFrame() {
	  let animation = requestAnimationFrame(this.drawFrame);
	  this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
	  this.createStar(false);
	  this.stars.forEach(this.moveStar);
	},
	//展示所有的星星
	createStar(params) {
	  let now = new Date();
	  if (params) {
	    //初始化星星
	    for (var i = 0; i < 50; i++) {
	      const radius = Math.random() * 3 + 2;
	      let star = new this.Ball(radius);
	      star.x = Math.random() * this.canvas.width + 1;
	      star.y = Math.random() * this.canvas.height + 1;
	      star.color = "#ffffff";
	      star.shadowColor = this.shadowColorList[
	        Math.floor(Math.random() * this.shadowColorList.length)
	      ];
	      star.direction = this.directionList[
	        Math.floor(Math.random() * this.directionList.length)
	      ];
	      this.stars.push(star);
	    }
	  } else if (!params && now - this.last_star_created_time > 3000) {
	    //每隔3秒重绘修改颜色其中30个球阴影颜色
	    for (var i = 0; i < 30; i++) {
	      this.stars[i].shadowColor = this.shadowColorList[
	        Math.floor(Math.random() * this.shadowColorList.length)
	      ];
	    }
	    this.last_star_created_time = now;
	  }
	},
	//移动
	moveStar(star, index) {
	  if (star.y - this.canvas.height > 0) {
	    //触底
	    if (Math.floor(Math.random() * 2) === 1) {
	      star.direction = "leftTop";
	    } else {
	      star.direction = "rightTop";
	    }
	  } else if (star.y < 2) {
	    //触顶
	    if (Math.floor(Math.random() * 2) === 1) {
	      star.direction = "rightBottom";
	    } else {
	      star.direction = "leftBottom";
	    }
	  } else if (star.x < 2) {
	    //左边
	    if (Math.floor(Math.random() * 2) === 1) {
	      star.direction = "rightTop";
	    } else {
	      star.direction = "rightBottom";
	    }
	  } else if (star.x - this.canvas.width > 0) {
	    //右边
	    if (Math.floor(Math.random() * 2) === 1) {
	      star.direction = "leftBottom";
	    } else {
	      star.direction = "leftTop";
	    }
	  }
	  if (star.direction === "leftTop") {
	    star.y -= star.radius / this.speed;
	    star.x -= star.radius / this.speed;
	  } else if (star.direction === "rightBottom") {
	    star.y += star.radius / this.speed;
	    star.x += star.radius / this.speed;
	  } else if (star.direction === "leftBottom") {
	    star.y += star.radius / this.speed;
	    star.x -= star.radius / this.speed;
	  } else if (star.direction === "rightTop") {
	    star.y -= star.radius / this.speed;
	    star.x += star.radius / this.speed;
	  }
	  star.draw(this.context);
	}



  },
  mounted() {
    this.canvas = document.getElementById("myCanvas");
    this.context = this.canvas.getContext("2d");

    this.createStar(true);
    this.drawFrame();
  }
};
</script>

<style lang='less' scoped>
	.el-input {
	        width:300px;
	}

#login {
  width: 100vw;
  padding: 0;
  margin: 0;
  height: 100vh;
  font-size: 16px;
  background-repeat: no-repeat;
  background-position: left top;
  background-color: #242645;
  color: #fff;
  font-family: "Source Sans Pro";
  background-size: 100%;
/*  background-image: url("./login.png"); */
  position: relative;
  #bgd {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
  }
  #loginBox {
    width: 360px;
    height: 480px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    padding: 50px 40px 40px 40px;
    box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
    opacity: 1;
    background: linear-gradient(
      230deg,
      rgba(53, 57, 74, 0) 0%,
      rgb(0, 0, 0) 100%
    );
    /deep/ .inps input {
      border: none;
      color: #fff;
      background-color: transparent;
      font-size: 12px;
    }
    .submitBtn {
      background-color: transparent;
      color: #39f;
      width: 200px;
    }
    .iconfont {
      color: #fff;
    }
  }
}
</style>
